<template>
  <div style="padding-bottom:1rem;padding-top:1.5rem;">
    <TopNav title="RechargePage.czjl" show_left="true" back_url="/#/profile"></TopNav>
    <div>
      <UserAccountHeader
        left_title="IncomePage.sr" right_title="IncomePage.zc"
        left_url="/#/income" last_active=true
        right_url="/#/cost"
        last_title="RechargePage.cz" last_url="/#/recharge"
      />
      <nut-row type="flex" gutter="10" align="center">
        <nut-col :span="24" style="margin-bottom:1rem;">
          <div class="empty-box" v-if="data.length==0">
            {{ $t('RechargePage.zwjl') }}
          </div>
          <div v-else>
            <div style="overflow: hidden;margin:0.3rem 0;">
              <div class="pull-left" style="width:20%">{{ $t('RechargePage.jq') }}</div>
              <div class="pull-left" style="width:30%">{{ $t('RechargePage.zs') }}</div>
              <div class="pull-left" style="width:50%;">{{ $t('RechargePage.rq') }}</div>
            </div>
            <nut-leftslip v-for="(item, index) in data" :key="item.id" ref="leftslip">
              <div slot="slip-main" class="slip-main">
                <div style="width:20%"><b>{{item.money}}</b></div>
                <div style="width:30%">
                  <span v-if="item.status==0">{{ $t('RechargePage.sh') }}</span>
                  <span v-else-if="item.status==1">{{ $t('RechargePage.cg') }}</span>
                  <span v-else style="color:red;">{{ $t('RechargePage.sb') }}</span>
                </div>
                <div style="width:50%;">
                  {{item.created_at}}
                  <div v-if="item.status == -1">
                    {{item.reply}}
                  </div>
                </div>
              </div>
              <div slot="slipbtns" class="slipbtns"
              ><a href="javascript:;" @click="handleClickRemove(item.id,index)">{{ $t('RechargePage.sc') }}</a></div
              >
            </nut-leftslip>
            <div class="bottom-tips">
                {{ $t('RechargePage.gy') }}<b>{{data.length}}</b>{{ $t('RechargePage.tjl') }}({{ $t('RechargePage.zxszj') }}7{{ $t('RechargePage.t') }})
            </div>
          </div>
        </nut-col>
      </nut-row>
    </div>
    <MainNav nav_index="4" ref="main_nav"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import UserAccountHeader from "../components/UserAccountHeader";
import TopNav from "../components/TopNav";

export default {
  name: 'IncomePage',
    components: {MainNav,UserAccountHeader,TopNav},
    data () {
    return {
        loading:true,
        data:[],
        total:0,
    }
  },
    methods:{
        shiftTab(index){

        },
        getData(){
            this.$axios.get(this.$api_url.recharge_list).then((res)=>{
                this.data = res.data;
                this.total = 0;
                this.data.forEach((item)=>{
                    this.total += item.money;
                });
            })
        },
        handleClickRemove(id,index){
            this.$axios.post(this.$api_url.recharge_del,this.$qs.stringify({
                id:id,
            })).then((res)=>{
                if(res.data.code == 0){
                    this.data.splice(index, 1);
                } else{
                    this.$toast.fail(res.data.msg);
                }
            })
        },
    },
    mounted() {
      this.getData();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .nut-tab{
    border:none;
    padding:0;
  }
</style>
<style scoped>
  .empty-box ul{
    padding:0;
    margin:0;
    list-style: none;
  }
  .empty-box ul li{
    margin-bottom:1.2rem;
  }
  table{
    border-collapse: collapse;
    width:100%;
  }
  table td{
    border:thin solid #ccc;
    padding:0.5rem;

  }
  .tab-box{
    border:none;
    padding:0;
  }
  .bottom-tips{
    height:2rem;
    line-height:2rem;
  }
  .total-box{
    height: 4rem;
    line-height: 4rem;
    font-size: 2rem;
  }

</style>
